<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI角色扮演网站</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <!-- 顶部导航栏 -->
        <header class="header">
            <div class="logo">
                <h1>🎭 AI角色扮演</h1>
            </div>
            <div class="user-info">
                <input type="text" id="username" placeholder="输入用户名" maxlength="20">
                <button id="loginBtn" class="btn btn-primary">登录</button>
            </div>
        </header>

        <!-- 主内容区 -->
        <main class="main-content">
            <!-- 角色选择区 - 增强版本 -->
            <section class="character-selection" id="characterSelection">
                <h2>✨ 选择你的AI伙伴</h2>

                <!-- 搜索和筛选区域 -->
                <div class="character-controls">
                    <div class="search-box">
                        <input type="text" id="characterSearch" placeholder="🔍 搜索角色名称或特征...">
                        <button id="searchBtn" class="btn btn-secondary">搜索</button>
                        <button id="clearSearchBtn" class="btn btn-secondary">清除</button>
                    </div>

                    <!-- 角色类型筛选 -->
                    <div class="character-filters">
                        <div class="filter-group">
                            <label>角色类型：</label>
                            <div class="filter-buttons">
                                <button class="filter-btn active" data-filter="all">全部</button>
                                <button class="filter-btn" data-filter="assistant">智能助手</button>
                                <button class="filter-btn" data-filter="companion">陪伴角色</button>
                                <button class="filter-btn" data-filter="expert">专业专家</button>
                                <button class="filter-btn" data-filter="entertainment">娱乐角色</button>
                            </div>
                        </div>

                        <div class="filter-group">
                            <label>性格特点：</label>
                            <div class="filter-buttons">
                                <button class="personality-btn" data-personality="温和">温和</button>
                                <button class="personality-btn" data-personality="活泼">活泼</button>
                                <button class="personality-btn" data-personality="严谨">严谨</button>
                                <button class="personality-btn" data-personality="幽默">幽默</button>
                                <button class="personality-btn" data-personality="神秘">神秘</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 角色统计信息 -->
                <div class="character-stats">
                    <div class="stat-item">
                        <span class="stat-number" id="totalCharacters">0</span>
                        <span class="stat-label">个角色</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number" id="onlineCharacters">0</span>
                        <span class="stat-label">在线</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number" id="favoriteCharacters">0</span>
                        <span class="stat-label">收藏</span>
                    </div>
                </div>

                <!-- 角色网格 -->
                <div class="character-grid" id="characterGrid">
                    <!-- 角色卡片将通过JavaScript动态生成 -->
                </div>

                <!-- 加载更多按钮 -->
                <div class="load-more-container" style="text-align: center; margin-top: 30px;">
                    <button id="loadMoreBtn" class="btn btn-primary" style="display: none;">加载更多角色</button>
                </div>
            </section>

            <!-- 对话界面 -->
            <section class="chat-interface" id="chatInterface" style="display: none;">
                <div class="chat-header">
                    <div class="character-info">
                        <img id="currentCharacterAvatar" src="" alt="角色头像" class="character-avatar">
                        <div class="character-details">
                            <h3 id="currentCharacterName"></h3>
                            <p id="currentCharacterDesc"></p>
                        </div>
                    </div>
                    <div class="chat-controls">
                        <button id="backBtn" class="btn btn-secondary">返回选择</button>
                        <button id="skillsBtn" class="btn btn-primary">技能</button>
                    </div>
                </div>

                <div class="chat-messages" id="chatMessages">
                    <!-- 聊天消息将动态添加到这里 -->
                </div>

                <div class="chat-input">
                    <div class="input-controls">
                        <button id="voiceBtn" class="btn btn-voice">🎤</button>
                        <input type="text" id="messageInput" placeholder="输入消息..." maxlength="500">
                        <button id="sendBtn" class="btn btn-primary">发送</button>
                    </div>
                    <div class="voice-status" id="voiceStatus" style="display: none;">
                        <span class="voice-indicator">🔴 正在录音...</span>
                        <button id="stopVoiceBtn" class="btn btn-secondary">停止</button>
                    </div>
                </div>
            </section>

            <!-- 技能面板 -->
            <section class="skills-panel" id="skillsPanel" style="display: none;">
                <div class="skills-header">
                    <h3>AI技能</h3>
                    <button id="closeSkillsBtn" class="btn btn-secondary">关闭</button>
                </div>
                <div class="skills-grid">
                    <div class="skill-card" data-skill="emotion">
                        <h4>🎭 情感分析</h4>
                        <p>分析你的情感状态，给出贴心回应</p>
                        <button class="btn btn-primary skill-btn">使用技能</button>
                    </div>
                    <div class="skill-card" data-skill="knowledge">
                        <h4>📚 知识问答</h4>
                        <p>回答角色相关的背景知识</p>
                        <button class="btn btn-primary skill-btn">使用技能</button>
                    </div>
                    <div class="skill-card" data-skill="game">
                        <h4>🎮 互动游戏</h4>
                        <p>与角色进行有趣的文字游戏</p>
                        <button class="btn btn-primary skill-btn">使用技能</button>
                    </div>
                </div>
            </section>

            <!-- 游戏模式界面 -->
            <section class="game-interface" id="gameInterface" style="display: none;">
                <div class="game-header">
                    <h3 id="gameTitle">互动游戏</h3>
                    <button id="closeGameBtn" class="btn btn-secondary">关闭</button>
                </div>
                <div class="game-content">
                    <div class="game-types">
                        <button class="btn btn-game" data-game="riddle">🧩 猜谜游戏</button>
                        <button class="btn btn-game" data-game="story">📖 故事接龙</button>
                        <button class="btn btn-game" data-game="poem">🎨 诗歌创作</button>
                    </div>
                    <div class="game-area" id="gameArea">
                        <p>选择一个游戏开始与AI角色互动吧！</p>
                    </div>
                    <div class="game-input" style="display: none;">
                        <input type="text" id="gameInput" placeholder="输入你的回答...">
                        <button id="gameSubmitBtn" class="btn btn-primary">提交</button>
                    </div>
                </div>
            </section>
        </main>

        <!-- 加载动画 -->
        <div class="loading" id="loading" style="display: none;">
            <div class="spinner"></div>
            <p>AI正在思考中...</p>
        </div>

        <!-- 错误提示 -->
        <div class="error-toast" id="errorToast" style="display: none;">
            <span id="errorMessage"></span>
            <button id="closeErrorBtn">×</button>
        </div>
    </div>

    <!-- 音频元素 -->
    <audio id="audioPlayer" controls style="display: none;"></audio>

    <script src="script.js"></script>
</body>
</html>